<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;box-sizing: border-box;}
        ul{list-style: none;}
        .box{
            width: 1200px;
            margin: 0 auto;
            padding-bottom: 60px;
        }
        .list li{
            margin: 20px 0;
        }
        .bom{
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background: rgba(0,0,0,0.5);
            text-align: center;
            line-height: 60px;
        }
        .bom p{
            font-size: 16px;
            color: #fff;
        }
        .list span{
            float: left;
            padding: 5px 10px;
            margin: 5px;
            background: pink;
        }
        .list div{
            overflow: hidden;
        }
        .right{
            position: fixed;
            top: 20px;
            right: 50px;
            padding: 0 10px;
            background: skyblue;
            color: #fff;
            text-align: center;
            line-height: 60px;
        }
    </style>
</head>
<body>
    <div class="box">
        
    </div>
    <div class="bom">
        <p class="all"></p>
    </div>
    <div class="right">返回首页</div>
</body>
</html>
<script src="js/get.js"></script>
<script src="js/request.js"></script>
<script>
    //结合数据 渲染页面
    request('/list?title=1','GET',null,function(dat){

        //对数据进行处理；
        dat=JSON.parse(dat);

        //结构数据
        let {content}=dat;
        console.log(content)
        //渲染数据
        createContent(content,$('.box'))

        //调用计算总价 商品加减的函数
        getdom(el('.add'),el('.sick'),el('.num'),el('.price'),el('.list li'))
    })
    //封装一个创建元素的方法
    function createContent(cont,parent){
        parent.innerHTML=`
                    <ul class="list">
                        ${cont.map(item=>{
                            return `<li>
                                        <p class="name">${item.name}</p>
                                        <p class="price">${item.price}</p>
                                        <div>
                                            <span class="sick">-</span>
                                            <span class="num">${item.num}</span>
                                            <span class="add">+</span>
                                        </div>
                                        
                                        
                                </li>`
                        }).join('')}
                    </ul>`
    }
    //点击加减 计算总价  
    function getdom(add,sick,num,price,list){
			console.log(add,sick,num,price,list)
			//封装一个计算总价的方法
			function getall(){
				var all=0;
				for(var i=0;i<list.length;i++){
                    var res=parseInt(num[i].innerHTML)*parseFloat(price[i].innerHTML)
                    console.log(res)
                    all += res
                   
                }
                all=all.toFixed(2)
				$('.all').innerHTML=all+'元'
            }
            getall()
			//点击加号
			add.forEach(function(item,index){
				item.onclick=function(){
                    var n=parseInt( num[index].innerHTML)
                    console.log(n)
					n++;
					num[index].innerHTML=n+' 份'
					
					getall()
				}
				
			})
			//点击减号
			sick.forEach(function(item,index){
				item.onclick=function(){
					
					var n=parseInt( num[index].innerHTML)
					if(n>0){
						n--;
						num[index].innerHTML=n+' 份'
						getall()
					}
					
					if(n==0){
						$('.list').removeChild(list[index])
					}
					
				}
				
			})
			
        }
        $('.right').onclick=function(){
            location.href='./index.html'
        }
</script>